<script>
import XuanHeader from '@/components/current/XuanHeader.vue' // 页头
import XuanFooter from '@/components/current/XuanFooter.vue' // 页脚

export default {
  components: {
    XuanHeader, // 页头
    XuanFooter // 页脚
  },
  el: 'app',
  data() {
    return {
      /* 水印 */
      watermark: [
        '沐玄阁',
        '中华传统文化探索'
      ]
    }
  },
  watch: {},
  created() {
    // this.loadingMethod(0, true); // 顶部进度条加载动画
  },
  mounted() {},
  methods: {
    
    /**
     * 顶部进度条加载动画
     * 
     * @param {number} time 加载使用的时间（单位：毫秒）
     * @param {boolean} status 加载完成后的状态（true:成功。false:失败）
     */
    loadingMethod(time, status) {

      // this.$Loading.finish(); // 进度条加载完成
      
      this.$Loading.start(); // 进度条加载开始
      setTimeout(() => {
        if (status) {
          this.$Loading.finish(); // 进度条加载完成
        } else {
          this.$Loading.error(); // 进度条加载失败
        }
      }, time);

    }

  }
}
</script>

<template>

  <el-watermark :font="{fontSize:15, color:'rgba(0, 0, 0, 0.02)'}" :content="watermark">

    <div class="index">

      <!-- 页头 -->
      <div class="header">
        <XuanHeader />
      </div>

      <!-- 界面 -->
      <div class="interface">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
          <!-- 顶部进度条加载动画 -->
          {{ loadingMethod(0, true) }}
        </router-view>
      </div>

      <!-- 页脚 -->
      <div class="footer">
        <XuanFooter />
      </div>

      <!-- 返回顶部 -->
      <div>
        <el-backtop :right="40" :bottom="40" class="mouse" />
      </div>

    </div>

  </el-watermark>

</template>

<style scoped lang="less">
.index {
  min-width: 1300px;

  .interface {
    min-height: 100vh;
    padding-top: 60px;
    background-color: rgb(249, 249, 249);
  }

}
</style>
